<template>
  <el-col :span="span>0?span:24">
    <span class="title float-left">{{title}}</span>
    <span class="remark float-left">{{remark}}</span>
    <i v-show="more_title" class="el-icon-arrow-right float-right remark" style="font-size:14px;margin-right:10px;margin-left:0;font-weight: bold;"></i>
    <slot name="right" class="float-right"></slot>
    <span class="more-title float-right" v-show="more_title" v-html="more_title"></span>
  </el-col>
</template>
<style lang="less" scoped>
.el-col {
      min-height: 50px;
      border-bottom: 1px solid #e4e7ed;
      
      .title,.more-title{
          font-size: 15px;
          color: #409EFF;
          font-family: "微软雅黑";
          line-height: 50px;
          margin-left: 10px;
      }
      .remark{
          font-size: 13px;
          color: #a2aebb;
          line-height: 50px;
          font-family: '微软雅黑';
          margin-left: 50px;
      }
    }
</style>

<script>
export default {
  props: ['lang','title','remark','more_title']
}
</script>
<!--
             每个col 都是一行
             title 是标题，remark 是备注
             more_title 是右边要显示的文字，如果有这个则显示箭头，如果需要显示箭头又不显示文字，传个空格
             有个right 的插槽，适合右边需要自定义内容的 
         -->